<template>
	<view class="number-box" :class="{'number-box-disabled': disabled}" @click.stop="onStop">
		<u-number-box v-model="count" :min="min" :max="max" :disablePlus="disablePlus" integer :disabled="disabled" @change="onChange">
			<u-icon slot="minus" name="minus-circle" color="#0E94FC" size="42rpx"></u-icon>
			<text slot="input" class="box-input">{{ count }}</text>
			<u-icon slot="plus" name="plus-circle-fill" :color="disablePlus ? '#d9d9d9' : '#0E94FC'" size="42rpx"></u-icon>
		</u-number-box>
	</view>
</template>

<script>
	export default {
		props: {
			value: {
				type: Number,
				default: 0
			},
			min: {
				type: Number,
				default: 0
			},
			max: {
				type: Number,
				default: 999
			},
			disabled: Boolean,
			disablePlus: Boolean
		},
		watch: {
			value(val) {
				if (val != this.count) {
					this.count = val
				}
			}
		},
		data() {
			return {
				count: this.value
			}
		},
		methods: {
			// 空处理方法
			onStop() {},
			onChange(e) {
				this.$emit('change', e.value)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.number-box {
		.box-input {
			width: 70rpx;
			text-align: center;
			font-size: 28rpx;
			font-weight: normal;
			color: $u-main-color;
		}
	}
	.number-box-disabled {
		opacity: 0.5;
	}
</style>